<template>
  <view class="chat-module">
    <u-navbar
      :title="$t('friend.chatSetting')"
      :autoBack="true"
      bgColor="#F6F6F6"
      titleStyle="color: #000000"
      placeholder
    >
    </u-navbar>
    <view class="swich-view">
      <view class="label">
        <view class="Turn">{{ $t("friend.trunChat") }}</view>
        <view class="Others">{{
          value11 ? $t("friend.payChat") : $t("friend.feeChat")
        }}</view>
      </view>
      <u-switch
        space="2"
        v-model="value11"
        activeColor="#61BDB2"
        inactiveColor="rgb(230, 230, 230)"
      />
    </view>
    <view v-if="value11" class="price-view">
      <view class="content-detail">
        <view>{{ $t("friend.Currency") }}</view>
        <view class="detail">
          <input
            :placeholder="$t('order.Please-Choose')"
            v-model="receiptCurrency"
            disabled
            class="input-view"
            @click="
              () => {
                show = true;
              }
            "
            placeholder-style="color: #A6A6A6;"
          />
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
      </view>
      <view class="content-detail">
        <view>{{ $t("friend.setPrice") }}</view>
        <view class="detail">
          <input
            placeholder="0.00"
            v-model="SetPrice"
            class="input-view"
            type="number"
            placeholder-style="color: #A6A6A6;"
          />
          <view class="danwei">{{ receiptCurrency }}</view>
        </view>
      </view>
    </view>
    <view class="explain" v-if="value11">
      <view
        >{{ $t("friend.payMoney1") }}
        <span class="money">{{ chatUnit }}{{ SetPrice }}</span>
        {{ $t("friend.payMoney2") }}</view
      >
      <view style="margin-top: 20upx"
        >{{ $t("friend.post") }} <span class="money">10% </span></view
      >
    </view>
    <view class="btn" @click="handlePost">{{
      $t("friend.platformMoney")
    }}</view>
    <u-picker
      v-if="currencys.length > 0"
      :show="show"
      :columns="currencys"
      keyName="currency"
      @confirm="confirm"
      @cancel="close"
      :cancelText="$t('cancel')"
      :confirmText="$t('confirm')"
    ></u-picker>
  </view>
</template>

<script>
import { getCurrencyList } from "@/services/bourse.js";
import { updateFriendInfo } from "@/services/makeFriend";
import { getSymbol } from "@/utils/index";
export default {
  data() {
    return {
      value11: false,
      receiptCurrency: "",
      SetPrice: "",
      currencys: [],
      show: false,
      chatUnit: "",
    };
  },
  methods: {
    async getCurrency() {
      var resp = await getCurrencyList();
      if (!resp.success) return;
      this.currencys = [resp.result.data];
    },
    close() {
      this.show = !this.show;
    },
    async confirm({ value }) {
      this.selectReceiptCurrency = value;
      this.receiptCurrency = value[0].currency;
      this.show = false;
      const unit = await getSymbol(this.selectReceiptCurrency[0].id);
      this.chatUnit = unit[0].symbol;
    },
    async handlePost() {
      this.formData.chat = this.value11 ? 1 : 0;
      if (this.formData.chat) {
        if (!this.formData.price) {
          uni.showToast({
            title: "请填写价格",
            icon: "error",
          });
          return;
        }
        if (!this.receiptCurrency) {
          uni.showToast({
            title: "请选择币种",
            icon: "error",
          });
          return;
        }
      }
      this.formData.price = this.SetPrice;
      this.formData.currencyId = this.selectReceiptCurrency[0].id;
      this.formData.currency = this.receiptCurrency;
      console.log(this.formData, "this.formData)");
      const resp = await updateFriendInfo(this.formData);
      if (!resp.success) return;
      uni.switchTab({
        url: "/pages/makefriends/MakeFriends",
      });
    },
  },
  async onLoad(option) {
    this.getCurrency();
    this.formData = this.$store.state.friendsInformation;
    this.value11 = this.formData.chat ? true : false;
    this.receiptCurrency = this.formData.currency;
    this.SetPrice = this.formData.price;
    this.selectReceiptCurrency = [
      {
        id: this.formData.currencyId,
        currency: this.formData.currency,
      },
    ];
    const unit = await getSymbol(this.formData.currencyId);
    this.chatUnit = unit[0].symbol;
  },
};
</script>

<style lang="scss" scoped>
.chat-module {
  padding: 30upx;
}
.swich-view {
  padding: 30upx;
  background: #ffffff;
  border-radius: 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .label {
    .Turn {
      font-size: 30upx;
      font-weight: 400;
      color: #000000;
    }
    .Others {
      font-size: 24upx;
      font-weight: 400;
      color: #878787;
      margin-top: 20upx;
    }
  }
}
.price-view {
  padding: 0upx 30upx;
  background: #ffffff;
  border-radius: 20upx;
  margin-top: 30upx;
  .content-detail {
    padding: 40upx 0upx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2upx solid #f6f6f6;
    .detail {
      display: flex;
      align-items: center;
    }
    .arrow-icon {
      color: #a6a6a6;
      font-size: 30upx;
      margin-left: 30upx;
    }
    .danwei {
      font-size: 30upx;
      font-weight: 400;
      color: #000000;
      margin-left: 13upx;
    }
    .input-view {
      text-align: right;
    }
  }
}
.explain {
  margin-top: 30upx;
  text-align: right;
  font-size: 26upx;
  font-weight: 400;
  color: #878787;
  .money {
    color: #fe6600;
  }
}
.btn {
  position: fixed;
  bottom: 20upx;
  width: 90%;
  height: 90upx;
  background: #61bdb2;
  border-radius: 20upx;
  line-height: 90upx;
  text-align: center;
  font-size: 30upx;
  font-weight: 500;
  color: #ffffff;
}
</style>